<template>
    <div class="form-container">
      <!-- 标题部分 -->
      <h1 class="title">校园配送系统-登录</h1>
  
      <!-- 表单结构 -->
      <el-form :rules="rules" :model="form" ref="form" label-width="80px" class="form">
      
        <!-- 用户名输入项 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
  
        <!-- 密码输入项 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码"
          @keyup.enter.native="onSubmit"></el-input>
        </el-form-item>
  
        <!-- 身份选择 -->
        <el-form-item label="选择身份" prop="role">
          <el-radio-group v-model="form.role">
            <el-radio label="商家">商家</el-radio>
            <el-radio label="消费者">消费者</el-radio>
            <el-radio label="配送员">配送员</el-radio>
          </el-radio-group>
        </el-form-item>
  
        <!-- 按钮行 -->
        <el-form-item>
          <el-row justify="center">
            <!-- 登录按钮 -->
            <el-col :span="7">
              <el-button type="primary" @click="onSubmit" style="width: 100%;">{{ loading ? '登录中...' : '登录' }}</el-button>
            </el-col>
  
  
            <!-- 返回注册按钮 -->
            <el-col :span="7">
              <el-button @click="goToRegister" style="width: 100%;">注册</el-button> 
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    name: 'LoginView',
    data() {
      return {
        loading: false, // 控制注册按钮的加载状态
        form: {
          username: '',         // 用户名
          password: '',          // 密码
          role: '商家'  // 默认选择商家身份
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '用户名长度为 2 到 6 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 10, message: '密码长度应在 6 到 10 个字符之间', trigger: 'blur' }  // 确保密码长度不少于6位
          ],
          role: [
          { required: true, message: '请选择身份', trigger: 'change' }
        ]
        }
      };
    },
  methods: {
  async onSubmit() {
  // 表单验证
  this.$refs.form.validate(async (valid) => {
    if (!valid) {
      this.$message.warning('请填写完整的登录信息');
      return;
    }

    this.loading = true;

    try {
      // 发送登录请求，包含用户名、密码和角色
      const response = await this.$axios.post('/login', {
        username: this.form.username,
        password: this.form.password,
        role: this.form.role,
      });

      // 检查后端返回的响应数据
      if (response.data && response.data.code === '200') {
        // 获取后端返回的用户 ID
        const userid = response.data.o;  // 根据后端的返回，使用 o 获取用户 ID
        const role = this.form.role;      // 假设前端输入的角色字段 role 传递正确

        // 保存用户信息到本地存储
        localStorage.setItem('userId', userid);
        localStorage.setItem('role', role);

        // 动态跳转到对应页面，带上用户 ID
        const rolePathMap = {
          商家: `/merchant/${userid}`,
          消费者: { name: "用户界面", query: { id: userid } }, // 使用路由的 name 和 query 参数
          配送员: { name: "配送员界面", query: { id: userid } },
        };

        // 获取目标路径并跳转
        const targetPath = rolePathMap[role];
        if (targetPath) {
          this.$router.push(targetPath); // 跳转到对应角色的页面
        } else {
          this.$message.error('未知的用户身份');
        }
      } else {
        // 后端返回失败
        this.$message.error(response.data.msg || '登录失败');
      }
    } catch (error) {
      console.error('登录失败:', error);
      this.$message.error('登录失败，请稍后重试');
    } finally {
      // 结束加载状态
      this.loading = false;
    }
  });
},

      resetForm(formName) {
      this.$refs[formName].resetFields();
      },
  

      goToRegister() {
        this.$router.push('/register');  // 跳转到注册页面
      }
    }
  };
  </script>
  
  <style scoped>
  /* 容器样式：使整个表单居中，并添加背景图片 */
  .form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;  /* 使标题和表单垂直排列 */
    height: 100vh; /* 使用视口高度来使表单垂直居中 */
    width: 100%; /* 让容器宽度充满屏幕 */
    background-image: url('@/assets/bg1.png'); /* 使用相对路径引用背景图 */
    background-size: contain; /* 背景图缩小以适应容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-attachment: fixed; /* 使背景图片固定 */
  }
  
  /* 标题样式：使标题居中 */
  .title {
    font-size: 32px; /* 设置标题字体大小 */
    font-weight: bold; /* 设置加粗字体 */
    text-align: center; /* 标题居中 */
    margin-bottom: 20px; /* 设置标题与表单之间的间距 */
  }
  
  /* 表单样式：设置一个合适的宽度，并设置半透明背景 */
  .form {
    width: 400px;  /* 设置表单宽度 */
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景，值为 0.8 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  }
  
  /* 调整按钮的间距 */
  .el-button {
    margin-right: 10px;
  }
  </style>